<template>
  <div>
    <el-container class="main-el-contarner">
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              size="small"
              @submit.native.prevent
            >
              <el-form-item label="告警类型：" label-width="90px">
                <el-select
                  v-model="param.signalStatus"
                  placeholder="告警类型"
                  :clearable="true"
                  size="small"
                  style="width: 150px"
                >
                  <el-option label="离线" value="1"></el-option>
                  <el-option label="提醒" value="2"></el-option>
                  <el-option label="告警" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入设备名称、设备类型关键字检索"
                  v-model="param.name"
                  clearable
                  size="small"
                  style="width: 350px"
                  @keyup.enter.native="onSearch"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="查询时间">
                <el-date-picker
                  v-model="param.time"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch">查找</el-button>
              </el-form-item>
              <el-form-item style="float: right" size="small">
                <el-button type="text" @click="excelExport" size="small"
                  ><i class="el-icon-download"></i> 导出数据</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="container-box">
            <el-table
              :data="datas"
              border
              stripe
              max-height="480px"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              style="width: 100%"
              size="small"
              @selection-change="selectionChange"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column prop="name" label="事件名称">
                <template slot-scope="scope">
                  <div v-if="scope.row.signalStatus == 1">离线</div>
                  <div v-if="scope.row.signalStatus == 2">提醒</div>
                  <div v-if="scope.row.signalStatus == 3">告警</div>
                </template>
              </el-table-column>
              <el-table-column prop="warningExplain" label="事件描述"> </el-table-column>
              <el-table-column prop="deviceName" label="设备名称"> </el-table-column>
              <el-table-column prop="deviceCode" label="设备编号"> </el-table-column>
              <el-table-column prop="deviceType" label="设备类型"> </el-table-column>
              <el-table-column prop="warningDate" label="事件时间"> </el-table-column>
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pageNo"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import SideHeader from "@/views/inc/SideHeader";
import Navlanmu from "@/views/inc/Navlanmu";
import { api } from "@/api/http.js";
import { getDateTimes, numFormat, getDateWeek } from "@/utils/index.js";
import { getlist } from "@/api/message/list";
import { selectDeviceWarning } from "@/api/sendhttp/alarm";

export default {
  name: "EventRecordList",
  components: { SideHeader, Navlanmu },
  data() {
    return {
      loadingdata1: false,
      isloading: false,
      param: {
        signalStatus: "",
        name: "",
        pageNo: 1,
        pageSize: 10,
        time: [
          new Date(
            new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 60 * 60 * 1000
          ),
          new Date(),
        ],
        startTime: "",
        endTime: "",
      },
      exportParam: {
        startTime: "",
        endTime: "",
      },
      datas: [
        { name: "故障告警", status: "1" },
        { name: "离线告警", status: "1" },
        { name: "消防告警", status: "1" },
        { name: "周界入侵", status: "1" },
      ],
      dataTotal: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    //
  },
  created() {
    this.isloading = false;
    this.getDatas();
  },
  methods: {
    handleAdd() {},
    // 数据搜索按钮
    onSearch() {
      this.param.pageNo = 1;
      this.getDatas();
    },
    // 复选框按钮
    selectionChange() {
      console.log("selectionChange");
    },
    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.pageSize + index + 1;
    },
    sizeChange(val) {
      this.param.pageSize = val;
      this.getDatas();
    },
    currentChange(val) {
      this.param.pageNo = val;
      this.getDatas();
    },

    // 获取数据
    getDatas() {
      // 	this.param.startTime = this.param.time[0];
      // 	this.param.endTime = this.param.time[1];
      //     //console.log("this.param:", this.param);
      //     selectDeviceWarning(this.param).then((response) => {
      // 		console.log(response);
      //       if (response.status === 200) {
      //         if (response.data.code == "200") {
      // 		   if(response.data.data!=null){
      // 			  this.datas = response.data.data;
      // 			  this.dataTotal = response.data.totalCount;
      // 			  this.param.pageNo = response.data.currentPage;
      // 		   }else{
      // 			   this.datas = [];
      // 			   this.dataTotal = 0;
      // 			   this.param.pageNo = 0;
      // 		   }

      //         }
      //       }
      //     });
      var fromData = [];
      fromData = {
        // username:'admin',
        // password:'accm3!23',
        // baseSQL:'device_name=2',
        funId: "msg_control_records",
      };
      getlist(fromData).then((res) => {
        console.log("res", res.data);
      });
    },
    // 导出实时数据
    excelExport() {
      this.exportParam.startTime = this.param.startTime;
      this.exportParam.endTime = this.param.endTime;
      var urls = "?" + this.parseParams(this.exportParam);
      window.open(api + "deviceWarning/exporDeviceWarning" + urls, "_blank");
    },
    parseParams(data) {
      try {
        var tempArr = [];
        for (var i in data) {
          if (
            data[i] == null ||
            data[i] == "" ||
            data[i] == "undefined" ||
            data[i] == "null"
          ) {
            continue;
          }
          if (i == "pageSize" || i == "pageNo") {
            continue;
          }
          var key = encodeURIComponent(i);
          var value = "";
          if (key == "startTime" || key == "endTime") {
            value = this.formatDate(data[i]);
          } else {
            value = encodeURIComponent(data[i]);
          }
          tempArr.push(key + "=" + value);
        }
        var urlParamsStr = tempArr.join("&");
        return urlParamsStr;
      } catch (err) {
        return "";
      }
    },
    formatDate(date) {
      //年
      var year = date.getFullYear();
      //月
      var month = date.getMonth() + 1;
      //日
      var strDate = date.getDate();
      //时
      var hour = date.getHours();
      //分
      var minute = date.getMinutes();
      //秒
      var second = date.getSeconds();

      month = month > 9 ? month : "0" + month;

      strDate = strDate > 9 ? strDate : "0" + strDate;

      hour = hour > 9 ? hour : "0" + hour;

      minute = minute > 9 ? minute : "0" + minute;

      second = second > 9 ? second : "0" + second;

      var newdata =
        year + "/" + month + "/" + strDate + " " + hour + ":" + minute + ":" + second;
      return newdata;
    },
  },
};
</script>
<style>
.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}
</style>
<style scoped>
.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style scoped>
.righttop-search-box {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
  position: fixed;
  top: 0;
  width: calc(100% - 55px);
  z-index: 4;
}
.righttop-search-box .el-form-item {
  margin-bottom: 0px !important;
}
.container-box {
  padding: 10px;
  margin: 50px 0;
}
.pagebox {
  text-align: right;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #ececec;
  z-index: 4;
}
</style>
